import './index.less'
import { useRef } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/all'
console.log(ScrollTrigger)
gsap.registerPlugin(ScrollTrigger) 
function Content() {
    const videoRef = useRef(null)
    gsap.to('.video-box', {
        scrollTrigger: {
            trigger: '.video-box',
            start: 'top top',
            end: 'bottom top',
            scrub: true,
            pin: true,
            log:true
        },
        backgroundColor: 'red'
    })
    return (
        <>
            <div className="content">
                <div className='video-box'>
                    <div className='mask'></div>
                    <video autoPlay muted className="video" src='https://static-res.qq.com/web/im.qq.com/qq9_1080.mp4'></video>
                </div>
                <div className='desc'></div>
            </div>
        </>
    )
}

export default Content
